<script setup lang='ts'>
import { nextTick, onMounted, reactive, ref, watch } from 'vue';
const props = withDefaults(defineProps<{
    show?: boolean,
    title?: string,
    width?: number,
    height?: number | string,
    left?: number,
    top?: number,
}>(), {
    show: true,
    title: '设置',
    width: 700,
    height: 400,
    top: 0, left: 0
});
const emits = defineEmits(['close']);

const containerStyle = reactive<any>({ width: 700, height: 400, top: 0, left: 0 })
const container = ref<HTMLDivElement>()
const isdragEagle = ref(false)
// const domStyle = ref({ width: '700px', height: '400px', top: 'calc(50% - 200px)', left: 'calc(50% - 350px)' })
const domStyle = ref<any>({})

const defaultStyle = async () => {
    containerStyle.width = props.width;
    // @ts-ignore
    containerStyle.height = props.height;
    if (props.left && props.top) {
        containerStyle.left = props.left;
        containerStyle.top = props.top;
    } else {
        const body = document.body;
        const uiWidth = body.clientWidth;
        const uiHeight = body.clientHeight;
        // @ts-ignore
        containerStyle.top = uiHeight / 2 - props.height / 2;
        containerStyle.left = uiWidth / 2 - props.width / 2;
    }
}

const initStyle = async () => {
    await nextTick();
    if (!container.value) return;
    defaultStyle();
    updateStyle();
}

const updateStyle = () => {
    if (!container.value) return;
    const { width, height, top, left } = containerStyle;
    domStyle.value.width = width + 'px';
    domStyle.value.height = height != "auto" ? height + 'px' : height;
    domStyle.value.top = top + 'px';
    domStyle.value.left = left + 'px';
}

watch(() => props.show, (val) => { val && initStyle() }, { immediate: true });

const dragEagle = (e: MouseEvent) => {
    moveUp();
    if (!container.value) return;
    isdragEagle.value = true;
    const navheight = 0;
    const dom = document.body;
    const maxWidth = dom.clientWidth;
    const maxHeight = dom.clientHeight;
    const box = container.value;
    const disx = e.pageX - box.offsetLeft;
    const disy = e.pageY - box.offsetTop;
    document.onmousemove = function (e: MouseEvent) {
        if (!container.value) return
        e.stopPropagation();
        let left = e.pageX - disx;
        let top = e.pageY - disy;
        if (left > 0 && left <= maxWidth - containerStyle.width) {
            containerStyle.left = left;
        } else if (left <= 0 && containerStyle.left < left) {
            containerStyle.left = left;
        } else if (left > maxWidth - containerStyle.width && containerStyle.left > left) {
            containerStyle.left = left;
        }
        if (top > navheight && top <= maxHeight - container.value.offsetHeight) {
            containerStyle.top = top;
        } else if (top <= navheight && containerStyle.top < top) {
            containerStyle.top = top;
        } else if (top > maxHeight - container.value.offsetHeight && containerStyle.top > top) {
            containerStyle.top = top;
        }
        updateStyle();
    }
    document.onmouseup = function () {
        isdragEagle.value = false
        document.onmousemove = null
        document.onmouseup = null
    }
}

const moveUp = () => {
    if (!container.value) return;
    const dialogs = document.querySelectorAll('.modal-container') as NodeListOf<HTMLDivElement>;
    dialogs.forEach((dialog) => { dialog.style.zIndex = '99'; });
    container.value.style.zIndex = '100';
}

onMounted(async () => { await nextTick(moveUp); });


const setSize = async () => {
    await nextTick()
    if (!container.value) return;
    const { width, height } = containerStyle;
    domStyle.value.width = width + 'px'
    domStyle.value.height = height + 'px'
}

const resize = (e: MouseEvent) => {
    if (!container.value) return
    isdragEagle.value = true
    const dom = document.body
    const maxWidth = dom.clientWidth - containerStyle.left;
    const maxHeight = dom.clientHeight - containerStyle.top;

    document.onmousemove = function (e: MouseEvent) {
        e.stopPropagation();
        //计算当前鼠标位置和全局点击位置的偏插值，尝试修改宽度和高度
        const w = e.movementX + containerStyle.width;
        // @ts-ignore

        const h = e.movementY + container.value.offsetHeight;

        if (w >= 300 && w <= maxWidth) {
            containerStyle.width = w;
        }
        if (h >= 200 && h <= maxHeight) {
            // @ts-ignore
            // container.value.offsetHeight = h;
            containerStyle.height = h;

        }
        setSize();
    }

    document.onmouseup = function () {
        isdragEagle.value = false
        document.onmousemove = null
        document.onmouseup = null
    }
}

</script>

<template>
    <div class="modal-container" @click.stop="moveUp" v-if="show" ref="container" :style="domStyle"
        :class="{ 'modal-box': isdragEagle }">
        <div class="modal-header" @mousedown.stop="dragEagle">
            <div class="modal-title"> {{ title }}</div>
            <div class="modal-close" @click.stop="$emit('close')">✕</div>
        </div>
        <div class="modal-body">
            <slot></slot>
        </div>
        <i @mousedown.stop="resize" class="bar"></i>
    </div>
</template>

<style scoped>
.modal-container {
    position: fixed;
    color: black;
    z-index: 99;
    overflow: hidden;
    pointer-events: all;
    min-width: 300px;
    min-height: 70px;
    background: #fff;
    box-sizing: border-box;
    /* border: 1px solid #0000007e; */
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5)
}

.modal-box {
    transition: none !important;
}

.modal-header {
    width: 100%;
    height: 36px;
    line-height: 36px;
    /* background-color: #0000007e; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.modal-title {
    width: calc(100% - 36px);
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-weight: 700;
    cursor: grab;
    font-size: 16px;
    overflow: hidden;

}

.modal-close {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
}

.modal-close:hover {
    font-weight: 700;
}

.modal-body {
    width: 100%;
    height: calc(100% - 36px);
    overflow: auto;
}

.bar {
    position: absolute;
    height: 10px;
    width: 10px;
    bottom: 0px;
    right: 0px;
    cursor: nw-resize;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, #373737 50%, #a5a5a5 100%);
}
</style>
